<template>
  <div class="playlist-card" @click="handleClick">
    <div class="cover-wrapper">
      <img 
        :src="playlist.picUrl || defaultCover" 
        :alt="playlist.name"
        @error="handleImageError"
      >
      <div class="play-count">
        <Icon name="play" :size="12" />
        {{ formatPlayCount(playlist.playCount) }}
      </div>
    </div>
    <h3 class="name">{{ playlist.name }}</h3>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import type { PlaylistInfo } from '@/types'
import Icon from './Icon.vue'
import { formatPlayCount } from '@/utils'

// 默认封面图片
const defaultCover = 'https://p2.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg'

const props = defineProps<{
  playlist: PlaylistInfo
}>()

const router = useRouter()

const handleClick = () => {
  router.push(`/playlist/${props.playlist.id}`)
}

const handleImageError = (e: Event) => {
  const img = e.target as HTMLImageElement
  img.src = defaultCover
}
</script>

<style scoped>
.playlist-card {
  cursor: pointer;
  transition: transform 0.2s;
}

.playlist-card:hover {
  transform: translateY(-5px);
}

.cover-wrapper {
  position: relative;
  padding-top: 100%;
  margin-bottom: 8px;
  border-radius: 8px;
  overflow: hidden;
}

.cover-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-count {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.name {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style> 